<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    @include('public.h5_head')
    <script src="{{ env('CDN_DOMAIN_NAME') }}/js/app.js"></script>
    <script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/rem.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/virtual.css?v=1.0.2"/>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/commoncss/common.css"/>
    <script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/common.js"></script>
    <title>虚拟信息</title>
</head>
<body>
<script>
    var detail_data=[
            @foreach($goods_attr as $good_attr)
        [{{ $good_attr->id }},{{ $good_attr->produc_id }},'{{ $good_attr->produc_type }}','{{ $good_attr->produc_val }}',{{ $good_attr->pid }}],
            @endforeach
        [-1,'','']
    ];
    function getGoodcolor(pro_id,type) {
        var res = "";
        for(var i=0;i<detail_data.length;i++)
        {
            if(detail_data[i][1]==pro_id && detail_data[i][2]==type && parseInt(detail_data[i][4])==0 )
//                res += "<button class='product_model produc_color' title="+pro_id+" id="+detail_data[i][0]+">"+detail_data[i][3]+"</button>";
                res += "<li class='product_model produc_color color' title="+pro_id+" id="+detail_data[i][0]+">"+detail_data[i][3]+"</li>";
        }
        return res;
    }
    function getGoodstock(pro_id,type) {
        for(var i=0;i<detail_data.length;i++)
        {
            if(detail_data[i][1]==pro_id && detail_data[i][2] == type){
                return  "<span  class=' pro_stock_"+detail_data[i][1]+"' title="+detail_data[i][3]+"></span>";
            }
        }
    }
</script>
<div id="virtual_box">
    <div class="wrap">
        <div class="virtual">
            <ul class="virtual_ul">
                <li class="virtual_add">
                    <p class="virtual_p2">
                        <input type="hidden" id="color_id">
                        <input type="hidden" id="good" value="{{$good_id}}">
                        <span class="virtual_sp2">操作:</span>
                        <select class="virtual_select" id="action">
                            <option value="">请选择</option>
                            <option value="come_on">进入页面</option>
                            <option value="buy">购买商品</option>
                        </select>
                    </p>
                    <p class="virtual_p1">
                        <span class="virtual_sp1">添加虚拟人数:</span>
                        <input type="tel" maxlength="6" class="virtual_people" id="num" placeholder="人数" />
                    </p>

                </li>
                <li class="head_div">
                    {{--<img class="head-img" src="img/3.jpg"/>--}}
                </li>
                <li class="store_r" style="display: none">
                    <span class="virtual_color">选择颜色:</span>
                    <ol class="virtual_ol">
                        <script>document.write(getGoodcolor('{{$good_id}}','color'));</script>
                    </ol>
                </li>
                <li class="virtual_repertory" style="display: none">
                    <span class="virtual_sum">库存手数:</span>
                    <span class="virtual_stock pro_stock_"> <script>document.write(getGoodstock('{{$good_id}}','stock'));</script></span>
                </li>
            </ul>
        </div>
    </div>
    <div class="btn-info_box">
        <div class="btn btn-info" onclick="begin()">开始</div>
    </div>
    <div class="virtual_hide" style="display:none;">
        <div class="virtual_pass"><p class="pass"></p></div>
        <p class="virtual_ok">确定</p>
    </div>
    <div class="virtual_mask" style="display:none;"></div>
</div>
</body>
</html>
<script>
    is_weixn('.btn-info_box');
    /*iphoneX*/
    var str= navigator.userAgent.toLowerCase();
    var ver=str.match(/cpu iphone os (.*?) like mac os/);
    if(ver && $(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){
        $(".btn-info_box").css("height","3.499rem");
        $(".wrap").css("bottom","3.499rem");
    }

    $('.color').on('click',function () {
        $('.virtual_repertory').show();
        $(this).css({"background":"#ea294b","color":"#fff"})
        $(this).siblings().css({"background":"#e9e9e9","color":"#383838"})
        $('#color_id').val($(this).attr('id'));
        var pid =  $(this).attr('title');
        var id = $(this).attr('id');
        for(var i=0;i<detail_data.length;i++) {
            if(detail_data[i][4] == id && detail_data[i][2] == 'stock' && detail_data[i][1] == pid){
                $('.pro_stock_'+pid).text(detail_data[i][3]);
            }
        }
    });
    $('#num').on("input",function(){
        $('.head_div').empty();
        var num = $('#num').val();
        var action = $('#action').val();
        /*判断先选择操作*/
        if(action==''){
            //$('#num').blur();
            $('#num').attr("readonly",true);
            $(".pass").html('请先选择操作!');
            $(".virtual_hide").show();
            $(".virtual_mask").show();
            $(".virtual_ok").click(function(){
                $('#num').attr("readonly",false);
                $('.head_div').empty();
                $('#num').val('');
                $(".virtual_hide").hide();
                $(".virtual_mask").hide();
            })
        }
        if(num>32){
            $(".pass").html('添加最大虚拟人数为32个');
            $(".virtual_hide").show();
            $(".virtual_mask").show();
//            $('#num').blur();
            $('#num').attr("readonly",true);
            $(".virtual_ok").click(function(){
                $('#num').attr("readonly",false);
                $('.head_div').empty();
                $('#num').val("");
            })
        }
        var action = $('#action').val();
        var good_id = $('#good').val();
        var reg=/^[0-9]*$/;
        if(reg.test(num)!=true){
            $(".pass").html('请输入有效的数字！');
            $(".virtual_hide").show();
            $(".virtual_mask").show();
            $('#num').attr("readonly",true);
            //$('#num').blur();
            $(".virtual_ok").click(function(){
                $('#num').attr("readonly",false);
                $('#num').val("");
            })
        }
        if(num == ''){
             $('.head_div').empty();
             return false;
        }
        if( num>{{$fake_user_come_num}} && action=='buy'){
            $(".pass").html('虚拟购买人数不能大于当前虚拟在线人数'+'{{$fake_user_come_num}}');
            $(".virtual_hide").show();
            $(".virtual_mask").show();
            $('#num').val('');
            return false;
        }
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            },
            url:'/merchantTool/getHead',
            type:'post',
            data:{
                'num':num,
                'action':action,
                'good_id':good_id
            },
//            dataType:'json',
            success:function (data) {
                $('.head_div').empty();
                var length=0;
                for(var name_head in data){
                    //console.log(name_head);
                    $('.head_div').append("<img class='head-img' src='"+data[name_head]+"'/>");
                    $('.head_div').append("<input type='hidden' class='nickname'  value='"+name_head+"'/>");
                    length++;
                }
                //console.log(length);
                if(length>15){
                    $(".head-img").css({"height":"1.15rem","width":"1.15rem"})
                }
            }
        })
    });
    //点击确定隐藏
    $(".virtual_ok").click(function(){
        $(".virtual_hide").hide();
        $(".virtual_mask").hide();
    })
    $('#action').change(function () {
        var num = $('#num').val();
        var action = $('#action').val();
        if({{$fake_user_come_num}}=='0' || num>{{$fake_user_come_num}}){
            {{--$(".pass").html('虚拟购买人数不能大于当前虚拟在线人数'+{{$fake_user_come_num}});--}}
            {{--$(".virtual_hide").show();--}}
            {{--$(".virtual_mask").show();--}}
        }
        if(num>{{$fake_user_come_num}} && action=='buy'){
            $(".pass").html('虚拟购买人数不能大于当前虚拟在线人数'+'{{$fake_user_come_num}}');
            $(".virtual_hide").show();
            $(".virtual_mask").show();
            $(".head_div").empty();
            $('#num').val('');
            return false;
        }
        var action = $('#action').val();
        if(action == 'buy'){
            $('.store_r').show();
        }else if(action == 'come_on'){
            $('.store_r').hide();
            $('.virtual_repertory').hide();
        }
    });
    function begin() {
        var img_path = '';
        var nickname = '';
        var domain_name = '';
        $('.head-img').each(function () {
            img_path += domain_name+$(this).attr('src')+',';
        });
        $('.nickname').each(function () {
            nickname += domain_name+$(this).val()+',';
        });
        var color_id = $('#color_id').val();
        var num = $('#num').val();
        var action = $('#action').val();
        var good = $('#good').val();
        var sum = $('#sum').val();
        if(num==""){
            if(action=="" ){
                $(".pass").html('请填写完整信息');
                $(".virtual_hide").show();
                $(".virtual_mask").show();
            }
            if(action=="buy"){
                $(".pass").html('添加的人不能为空和0');
                $(".virtual_hide").show();
                $(".virtual_mask").show();
            }
        }else  if( num==0 ){
            if(action=="" || action=="buy"){
                $(".pass").html('添加的人不能为空和0');
                $(".virtual_hide").show();
                $(".virtual_mask").show();
            }
        }else{
            if(action=="") {
                $(".pass").html('请选择操作');
                $(".virtual_hide").show();
                $(".virtual_mask").show();
            }
//            }else{
//                $(".pass").html('请选择颜色');
//                $(".virtual_hide").show();
//                $(".virtual_mask").show();
//            }
        }
        if(action=='buy' && num>{{$fake_user_come_num}}) {
            if (num >{{$fake_user_come_num}}) {
                $(".pass").html('虚拟购买人数不能大于当前虚拟在线人数' +'{{$fake_user_come_num}}');
                $(".virtual_hide").show();
                $(".virtual_mask").show();
                return false;
            }
        }
        //获取商品属性
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            },
            url:'/merchantTool/tool',
            type:'post',
            data:{
                'user_id':'{{$user_id}}',
                'num':num,
                'good':good,
                'action':action,
                'color_id':color_id,
                'sum':sum,
                'face':img_path,
                'nickname':nickname
            },
            dataType:'json',
            success:function (data) {
                console.log(data);
                if(data.success){
                    if(data.msg=="库存不足"){
                        $(".pass").html(data.msg);
                        $(".virtual_hide").show();
                        $(".virtual_mask").show();
                    }else{
                        $(".pass").html(data.msg);
                        $(".virtual_hide").show();
                        $(".virtual_mask").show();
                        $(".virtual_ok").click(function(){
                            location.href="/produc/operationTool?good_id="+good;
                        })
                    }
                }else{
                    $(".pass").html(data.msg);
                    $(".virtual_hide").show();
                    $(".virtual_mask").show();
                }
            }
        })
    }
    $(document).on('input','.buy_inp',function () {
        var value = $('.buy_inp').val();
        var reg=/^[0-9]*$/;
        if(reg.test(value)==true){

        }else{
            $(".pass").html('请输入有效的数字！');
            $(".virtual_hide").show();
            $(".virtual_mask").show();
            //$('.buy_inp').blur();
            $('.buy_inp').attr("readonly",true);
            $(".virtual_ok").click(function(){
                //$('.buy_inp').focus();
                $('.buy_inp').attr("readonly",false);
            })
        }
    })
</script>